<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>放烟花效果（面向对象版）</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style type="text/css">
        html,
        body {
            overflow: hidden;
        }

        body,
        div,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            background: #000;
            font: 12px/1.5 arial;
            color: #7A7A7A;
        }

        a {
            text-decoration: none;
            outline: none;
        }

        #tips,
        #copyright {
            position: absolute;
            width: 100%;
            height: 50px;
            text-align: center;
            background: #171717;
            border: 2px solid #484848;
        }

        #tips {
            top: 0;
            border-width: 0 0 2px;
        }

        #tips a {
            font: 14px/30px arial;
            color: #FFF;
            background: #F06;
            display: inline-block;
            margin: 10px 5px 0;
            padding: 0 15px;
            border-radius: 15px;
        }

        #tips a.active {
            background: #FE0000;
        }

        #copyright {
            bottom: 0;
            line-height: 50px;
            border-width: 2px 0 0;
        }

        #copyright a {
            color: #FFF;
            background: #7A7A7A;
            padding: 2px 5px;
            border-radius: 10px;
        }

        #copyright a:hover {
            background: #F90;
        }

        p {
            position: absolute;
            top: 55px;
            width: 100%;
            text-align: center;
        }

        .fire {
            width: 3px;
            height: 150px;
            background: white;
            position: absolute;
        }

        .spark {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            opacity: 1;
        }
    </style>
    <script src="../../common.js"></script>
    <script src="../animate.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        document.onclick = function (evt) {
            var e = evt || event;
            // 添加小白点
            var fire = document.createElement("div");
            fire.className = "fire";
            fire.style.left = e.clientX + "px";
            fire.style.top = window.innerHeight + "px"; // 起于底部
            document.body.appendChild(fire); // 使用document.body 向其中添加fire
            animate(fire, { top: e.clientY, height: 3 }, function () {
                fire.remove();
                var count =  20;
                // 每一块碎片对应的角度
                var avd= 360/count;
                var flag = document.createDocumentFragment();
                for (var i = 0; i < count; i++) {
                      
               
                // 半径
                var radius = 200;
                // 烟花碎片对应的弧度
                var ahd = avd *Math.PI/180;
                    var spark = document.createElement("div");
                    spark.className = "spark";
                    spark.style.backgroundColor = randomColor();
                    spark.style.left = e.clientX + "px";
                    spark.style.top = e.clientY + "px";
                    // 设置速度
                    var speedx = Math.cos((ahd*i))*radius;
                    var speedy = Math.sin((ahd*i))*radius;
                    flag.appendChild(spark);
                   
                   
                    // animate(spark,{left:0},function(){
                    //     // this.remove();
                    // })
                    var t = setInterval(function () {
                        spark.style.left = spark.offsetLeft + speedx + "px";
                        spark.style.top = spark.offsetTop + speedy + "px";
                 
                        if (spark.offsetTop >= window.innerHeight || spark.offsetTop<0 || spark.offsetLeft<0 || spark.offsetLeft>1920) {
                            clearInterval(t);
                            spark.remove();
                        }
                    }, 30)

                }
                document.body.appendChild(flag);
              
            }
        )

        
        }

        
    </script>
</head>

<body >
    <div id="tips"><a id="manual" href="javascript:;" class="active">手动放烟花</a><a id="auto" href="javascript:;"
            class="">自动放烟花</a><a id="stop" href="javascript:;" class="">停止放烟花</a></div>
    <p>由于浏览器渲染能力有限, 当浏览器为IE或选择自动放烟花时, 随机生成的烟花碎片范围自动调整至20-30</p>
    <div id="copyright">建议使用Firefox, Chrome浏览器预览效果.</div>

</body>

</html>